import React from 'react'
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'
import { useNavigate, useLocation } from 'react-router-dom'
import { Badge, TabBar } from 'antd-mobile'

const tabs = [
    {
        key: '/index/home',
        title: '首页',
        icon: <AppOutline />,
        badge: Badge.dot,
    },
    {
        key: '/index/classify',
        title: '分类',
        icon: <UnorderedListOutline />,
        badge: '5',
    },
    {
        key: '/index/shopcart',
        title: '购物车',
        icon: (active: boolean) =>
            active ? <MessageFill /> : <MessageOutline />,
        badge: '99+',
    },
    {
        key: '/index/mine',
        title: '我的',
        icon: <UserOutline />,
    },
]
export default function Tabbar() {
    const location = useLocation()
    const { pathname } = location
    const navigate = useNavigate();
    const setRouteActive = (value: string) => {
        navigate(value)
        // console.log(value);
    }
    return (
        <div style={{ backgroundColor: "#fff" }}>
            <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
                {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                ))}
            </TabBar>
        </div>
    )
}
